<template>
  <div>
    <van-form @submit="saveUserInformation" input-align="right">
      <div class="content" style=" max-height: 60vh;overflow: auto;">
        <template v-for="(item, key) in fieldList">
          <div :key="key" v-if="detail ? key < 3 : true">
            <template v-if="item.isDefault == 1">
              <div>
                <van-field
                  v-if="item.labelVal == 'customerFullName'"
                  v-model="form.customerFullName"
                  name="姓名"
                  label="姓名"
                  :placeholder="detail ? '' : '请输入'"
                  :disabled="detail"
                />
                <van-field
                  v-if="item.labelVal == 'remarkMobiles'"
                  v-model="form.remarkMobiles"
                  name="手机号"
                  label="手机号"
                  :placeholder="detail ? '' : '请输入'"
                  :disabled="detail"
                />
                <van-field
                  v-if="item.labelVal == 'age'"
                  v-model="form.age"
                  name="年龄"
                  label="年龄"
                  :placeholder="detail ? '' : '请输入'"
                  disabled
                />
                <van-field
                  v-if="item.labelVal == 'birthday'"
                  v-model="form.birthday"
                  readonly
                  name="生日"
                  label="生日"
                  :placeholder="detail ? '' : '请选择'"
                  :disabled="detail"
                  @click="birthdayShow = true"
                />
                <van-field
                  v-if="item.labelVal == 'email'"
                  v-model="form.email"
                  name="邮箱"
                  label="邮箱"
                  :disabled="detail"
                  :placeholder="detail ? '' : '请输入'"
                />
                <van-field
                  v-if="item.labelVal == 'area'"
                  v-model="form.area"
                  readonly
                  label="所在省市区(县)"
                  :placeholder="detail ? '' : '请选择'"
                  @click="addressShow = true"
                  :disabled="detail"
                />
                <van-field
                  v-if="item.labelVal == 'address'"
                  v-model="form.address"
                  name="详细地址"
                  label="详细地址"
                  :placeholder="detail ? '' : '请输入'"
                  :disabled="detail"
                />
                <van-field
                  :disabled="detail"
                  v-if="item.labelVal == 'qq'"
                  v-model="form.qq"
                  name="QQ"
                  label="QQ"
                  :placeholder="detail ? '' : '请输入'"
                />
                <van-field
                  v-if="item.labelVal == 'position'"
                  v-model="form.position"
                  name="职业"
                  label="职业"
                  :placeholder="detail ? '' : '请输入'"
                  :disabled="detail"
                />
                <van-field
                  v-if="item.labelVal == 'remarkCorpName'"
                  v-model="form.remarkCorpName"
                  name="公司"
                  label="公司"
                  :placeholder="detail ? '' : '请输入'"
                  :disabled="detail"
                />
                <van-field
                  v-if="item.labelVal == 'otherDescr'"
                  v-model="form.otherDescr"
                  name="其他描述"
                  label="其他描述"
                  :placeholder="detail ? '' : '请输入'"
                  input-align="left"
                  :disabled="detail"
                  type="textarea"
                  class="conagency"
                />
              </div>
            </template>
            <template v-else>
              <template v-if="item.type == 1">
                <van-field
                  :disabled="detail"
                  v-model="item.value"
                  :name="item.labelName"
                  :label="item.labelName"
                  :placeholder="detail ? '' : '请输入'"
                />
              </template>
              <template v-else-if="item.type == 2">
                <van-field
                  :disabled="detail"
                  v-model="item.value"
                  readonly
                  :name="item.labelName"
                  :label="item.labelName"
                  :placeholder="detail ? '' : '请选择'"
                  @click="setSelectOpen(key)"
                />
              </template>
              <template v-else>
                <template v-if="item.typeSub == 1">
                  <VantFieldSelectPicker
                    :disabled="detail"
                    :label="item.labelName"
                    v-model="item.value"
                    placeholder="请选择"
                    :columns="item.otherContent"
                    :option="{ label: 'labelName', value: 'labelName' }"
                  />
                  <!-- @confirm="on.OrderClassify" -->
                </template>
                <template v-else>
                  <VantFieldCheckbox
                    :disabled="detail"
                    :label="item.labelName"
                    v-model="item.value"
                    placeholder="请选择"
                    :columns="item.otherContent"
                    label-width="100"
                    :option="{ label: 'labelName', value: 'labelName' }"
                  />
                </template>
              </template>
            </template>
          </div>
        </template>
      </div>
      <div class="save-btn-info" v-if="!detail">
        <van-button round block size="normal" type="info" native-type="submit">保存</van-button>
      </div>
    </van-form>
    <van-popup v-model="dateSelectShow" position="bottom" round :style="{ height: '60%' }">
      <van-datetime-picker
        v-model="dateSelect"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmSelect"
        @cancel="dateSelectShow = false"
      />
    </van-popup>
    <van-popup v-model="birthdayShow" position="bottom" round :style="{ height: '60%' }">
      <van-datetime-picker
        v-model="birthday"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
        @cancel="birthdayShow = false"
      />
    </van-popup>
    <!-- 请选择所在地区 -->
    <van-popup v-model="addressShow" round position="bottom">
      <van-cascader
        v-model="form.areaId"
        title="请选择所在地区"
        :options="addressOptions"
        :field-names="{
          text: 'name',
          value: 'id',
        }"
        @close="addressShow = false"
        @finish="selectedArea"
      />
    </van-popup>
  </div>
</template>
<script>
import { dateFormat } from '@/utils'
import VantFieldSelectPicker from '@/components/VantFieldSelectPicker.vue'
import VantFieldCheckbox from '@/components/VantFieldCheckbox.vue'
export default {
  name: 'define-field',
  components: {
    VantFieldSelectPicker,
    VantFieldCheckbox,
  },
  data() {
    return {
      birthdayShow: false,
      addressShow: false,
      minDate: new Date(1949, 9, 1),
      maxDate: new Date(),
      birthday: new Date(2022, 0, 17),
      form: {},
      fieldList: [],
      dateSelectShow: false,
      dateSelect: new Date(),
      dateIndex: null,
    }
  },
  props: {
    detail: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    baseData: {
      type: Object,
      default: {},
    },
    addressOptions: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    list: {
      immediate: true,
      handler(val) {
        if (val) {
          this.handlerData(val)
        }
      },
    },
    baseData: {
      immediate: true,
      handler(val) {
        if (val) {
          this.form = JSON.parse(JSON.stringify(val))
          if (this.list.length) {
            this.handlerData(this.list)
          }
        }
      },
    },
  },
  methods: {
    saveUserInformation() {
      let arr = []
      this.fieldList.forEach((ff, index) => {
        if (ff.isDefault == 0) {
          let obj = {
            customerId: this.form.customerId,
            fieldTemplateId: ff.id,
            id: ff.defineId,
            fieldCustomerInfoVal: [],
          }
          if (ff.type !== 3) {
            let data = { labelVal: ff.labelVal, infoVal: ff.value, id: ff.defineId }
            obj.fieldCustomerInfoVal[0] = data
          } else {
            if (ff.typeSub == 1) {
              obj.fieldCustomerInfoVal[0] = this.getValue(ff.otherContent, ff.value, ff.defineId)
            } else {
              if (ff.value && ff.value.length) {
                let list = []
                ff.value.forEach((val) => {
                  list.push(this.getValue(ff.otherContent, val, ff.defineId))
                })
                obj.fieldCustomerInfoVal = list
              }
            }
          }
          arr.push(obj)
        }
      })
      this.form.weCustomerInfoExpands = arr
      this.$emit('success', this.form)
    },
    getValue(list, val, id) {
      let obj = {}
      list.forEach((dd) => {
        if (val == dd.labelName) {
          obj = { labelVal: dd.labelVal, infoVal: val, id: id }
        }
      })
      return obj
    },
    confirm(date) {
      this.birthdayShow = false
      this.form.birthday = dateFormat(date, 'yyyy-MM-dd')
    },
    selectedArea({ selectedOptions }) {
      this.addressShow = false
      this.form.provinceId = selectedOptions[0].id
      this.form.cityId = selectedOptions[1].id
      this.form.areaId = selectedOptions[2].id
      this.form.area = selectedOptions.map((option) => option.name).join('/')
    },
    handlerData(data) {
      let arr = JSON.parse(JSON.stringify(data))
      arr.forEach((dd, index) => {
        if (dd.isDefault == 0) {
          let obj = this.getEditValue(dd)
          let ff = { ...dd, ...obj }
          arr[index] = ff
        }
      })
      this.fieldList = arr
    },
    getEditValue(data) {
      if (!Object.keys(this.form).length) {
        this.form = JSON.parse(JSON.stringify(this.baseData))
      }
      let obj = {
        value: data.type !== 3 ? '' : data.typeSub == 1 ? '' : [],
        defineId: '',
      }
      this.form.weCustomerInfoExpands &&
        this.form.weCustomerInfoExpands.forEach((dd, index) => {
          if (dd.fieldTemplateId === data.id) {
            // dd.id
            if (dd.fieldCustomerInfoVal && dd.fieldCustomerInfoVal.length) {
              obj.defineId = dd.id
              if (data.type !== 3) {
                obj.value = dd.fieldCustomerInfoVal[0].infoVal
              } else {
                obj.value = dd.fieldCustomerInfoVal.map((item) => {
                  return item.infoVal
                })
                if (data.typeSub == 1) {
                  obj.value = obj.value[0]
                }
              }
            }
          }
        })
      return obj
    },
    setSelectOpen(index) {
      this.dateIndex = index
      this.dateSelectShow = true
      if (this.fieldList[index].value) {
        this.dateSelect = new Date(this.fieldList[index].value)
      }
    },
    confirmSelect(date) {
      this.dateSelectShow = false
      this.fieldList[this.dateIndex].value = dateFormat(date, 'yyyy-MM-dd')
    },
  },
  created() {},
}
</script>
<style lang="less" scoped>
::v-deep .van-field__label {
  color: #222;
  font-weight: 500;
  width: 30vw;
  -webkit-text-fill-color: #222;
}
::v-deep .van-field__control:disabled {
  color: #222;
  font-weight: 500;
  -webkit-text-fill-color: #222;
}
.save-btn-info {
  width: 90%;
  margin: 20px auto;
  .van-button {
    height: 40px;
    line-height: 40px;
  }
}
</style>
